<template>
  <div>
    <!-- 表格表头，内容居中 :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }" -->
    <el-table
      stripe
      class="user-table"
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{textAlign: 'center', background: '#f2f2f2'}"
      :cell-style="{ textAlign: 'center' }"
    >
      <el-table-column prop="number" label="部门编号"></el-table-column>
      <el-table-column prop="name" label="员工"></el-table-column>
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column label="第一节" width="300px">
        <el-table-column prop label="上班">
          <template slot-scope="scope">
            <div>
              <div class="fixed_time">09:00</div>
              <div>{{scope.row.luptime}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop label="下班">
          <template slot-scope="scope">
            <div>
              <div class="fixed_time">12:30</div>
              <div>{{scope.row.ldowntime}}</div>
              <div class="fixed_btn">
                <el-button size="mini" type="success">事假</el-button>
                <el-button size="mini" type="primary">病假</el-button>
                <el-button size="mini" type="warning">调假</el-button>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="第二节">
        <el-table-column label="上班">
          <template slot-scope="scope">
            <div>
              <div class="fixed_time">09:00</div>
              <div>{{scope.row.ruptime}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="下班">
          <template slot-scope="scope">
            <div>
              <div class="fixed_time">12:30</div>
              <div>{{scope.row.rdowntime}}</div>
              <div class="fixed_btn">
                <el-button size="mini" type="success">事假</el-button>
                <el-button size="mini" type="primary">病假</el-button>
                <el-button size="mini" type="warning">调假</el-button>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column prop label="调整全日" width="180px">
        <template slot-scope="scope">
          <div class="btn">
            <el-button type="success" size="mini" @click="handleEdit(scope.$index, scope.row)">事假</el-button>
            <el-button type="success" size="mini">病假</el-button>
          </div>
          <div class="btn">
            <el-button type="success" size="mini" @click="handleEdit(scope.$index, scope.row)">调假</el-button>
            <el-button type="success" size="mini">调整</el-button>
          </div>
          <div class="btn_reset">
            <el-button size="mini" type="danger">重置</el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="打卡记录" width="400px">
        <template slot-scope="scope">
          <div class="tag">
            <el-tag v-for="(item,index) in scope.row.record" :key="index" type="info">{{item}}</el-tag>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 开始 -->
    <div class="pagination">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      ></el-pagination>
    </div>
    <!-- 分页 结束 -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        {
          number: 'PER',
          name: '王小虎',
          date: '2016-05-03',
          luptime: '09:00',
          ldowntime: '12:30',
          ruptime: '13:30',
          rdowntime: '18:00',
          record: [
            '08:56:11',
            '12:37:43',
            '12:55:18',
            '16:04:56',
            '18:17:58',
            '18:18:02'
          ]
        },
        {
          number: 'PER',
          name: '王小虎',
          date: '2016-05-03',
          luptime: '09:00',
          ldowntime: '12:30',
          ruptime: '13:30',
          rdowntime: '18:00',
          record: [
            '08:56:11',
            '12:37:43',
            '12:55:18',
            '16:04:56',
            '18:17:58',
            '18:18:02'
          ]
        },
        {
          number: 'PER',
          name: '张三',
          date: '2016-05-03',
          luptime: '09:00',
          ldowntime: '12:30',
          ruptime: '13:30',
          rdowntime: '18:00',
          record: [
            '08:56:11',
            '12:37:43',
            '12:55:18',
            '16:04:56',
            '18:17:58',
            '18:18:02'
          ]
        },
        {
          number: 'PER',
          name: '李四',
          date: '2016-05-03',
          luptime: '09:00',
          ldowntime: '12:30',
          ruptime: '13:30',
          rdowntime: '18:00',
          record: [
            '08:56:11',
            '12:37:43',
            '12:55:18',
            '16:04:56',
            '18:17:58',
            '18:18:02'
          ]
        },
        {
          number: 'PER',
          name: '王小虎',
          date: '2016-05-03',
          luptime: '09:00',
          ldowntime: '12:30',
          ruptime: '13:30',
          rdowntime: '18:00',
          record: [
            '08:56:11',
            '12:37:43',
            '12:55:18',
            '16:04:56',
            '18:17:58',
            '18:18:02'
          ]
        },
        {
          number: 'PER',
          name: '王小虎',
          date: '2016-05-03',
          luptime: '09:00',
          ldowntime: '12:30',
          ruptime: '13:30',
          rdowntime: '18:00',
          record: [
            '08:56:11',
            '12:37:43',
            '12:55:18',
            '16:04:56',
            '18:17:58',
            '18:18:02'
          ]
        },
        {
          number: 'PER',
          name: '张三',
          date: '2016-05-03',
          luptime: '09:00',
          ldowntime: '12:30',
          ruptime: '13:30',
          rdowntime: '18:00',
          record: [
            '08:56:11',
            '12:37:43',
            '12:55:18',
            '16:04:56',
            '18:17:58',
            '18:18:02'
          ]
        },
        {
          number: 'PER',
          name: '李四',
          date: '2016-05-03',
          luptime: '09:00',
          ldowntime: '12:30',
          ruptime: '13:30',
          rdowntime: '18:00',
          record: [
            '08:56:11',
            '12:37:43',
            '12:55:18',
            '16:04:56',
            '18:17:58',
            '18:18:02'
          ]
        },
        {
          number: 'PER',
          name: '王小虎',
          date: '2016-05-03',
          luptime: '09:00',
          ldowntime: '12:30',
          ruptime: '13:30',
          rdowntime: '18:00',
          record: [
            '08:56:11',
            '12:37:43',
            '12:55:18',
            '16:04:56',
            '18:17:58',
            '18:18:02'
          ]
        },
        {
          number: 'PER',
          name: '王小虎',
          date: '2016-05-03',
          luptime: '09:00',
          ldowntime: '12:30',
          ruptime: '13:30',
          rdowntime: '18:00',
          record: [
            '08:56:11',
            '12:37:43',
            '12:55:18',
            '16:04:56',
            '18:17:58',
            '18:18:02'
          ]
        },
        {
          number: 'PER',
          name: '张三',
          date: '2016-05-03',
          luptime: '09:00',
          ldowntime: '12:30',
          ruptime: '13:30',
          rdowntime: '18:00',
          record: [
            '08:56:11',
            '12:37:43',
            '12:55:18',
            '16:04:56',
            '18:17:58',
            '18:18:02'
          ]
        },
        {
          number: 'PER',
          name: '李四',
          date: '2016-05-03',
          luptime: '09:00',
          ldowntime: '12:30',
          ruptime: '13:30',
          rdowntime: '18:00',
          record: [
            '08:56:11',
            '12:37:43',
            '12:55:18',
            '16:04:56',
            '18:17:58',
            '18:18:02'
          ]
        }

      ],
      currentPage4: 4
    }
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.user-table {
  .btn {
    margin-bottom: 5px;
    .el-button {
      width: 35%;
    }
  }
  .btn_reset {
    .el-button {
      width: 76%;
    }
  }
  .tag {
    .el-tag {
      margin: 3px 2px;
    }
  }
  .fixed_time {
    background-color: #dadbe0;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .fixed_btn {
    position: absolute;
    bottom: 10px;
    left: -150px;
    width: 300px;
    z-index: 9;
  }
}
.pagination {
  margin-top: 25px;
  margin-left: 5px;
}

</style>
